.emoji-content {
	position: relative;
}
.emoji-btn {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	font-size: 20px;
	color: var(--jj-emoji-btn);
	transition: color 0.3s;
	cursor: pointer;
	@include no-select();
	&:hover {
		color: var(--jj-emoji-btn-hover);
	}
	&:active {
		opacity: 0.7;
	}
	&.active {
		color: var(--jj-emoji-btn-hover);
	}
}
.emoji-btn-icon {
	margin-right: 4px;
	font-size: inherit;
}
.emoji-picker {
	position: absolute;
	// top: 0;
	// left: 0;
	opacity: 0;
	display: none;
	transition: opacity 0.2s;
	filter: drop-shadow(0 8px 24px var(--jj-emoji-picker-box-shadow));
	z-index: 1;
	&.visible {
		opacity: 1;
	}
}
.emoji-picker-arrow {
	position: absolute;
	border: 10px solid transparent;
	&.top {
		border-top-color: var(--jj-emoji-picker-arrow-bg);
		bottom: -18px;
		left: 12px;
	}
	&.bottom {
		border-bottom-color: var(--jj-emoji-picker-arrow-bg);
		top: -18px;
		left: 12px;
	}
}
.emoji-picker-content {
	width: 388px;
	height: 340px;
	background-color: var(--jj-emoji-bg);
	// box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
}
.emoji-picker-head {
	flex-shrink: 0;
	height: 45px;
	padding: 0 12px;
	border-bottom: 1px solid var(--jj-emoji-picker-head-border);
	display: flex;
	align-items: center;
}
.emoji-picker-head-item {
	min-width: 48px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	white-space: nowrap;
	cursor: pointer;
	@include no-select();
	& + & {
		margin-left: 16px;
	}
	> img {
		width: 24px;
		height: 24px;
	}
	> span {
		font-size: 14px;
		color: var(--jj-emoji-picker-head-item);
	}
	&:hover {
		background-color: var(--jj-emoji-picker-head-item-bg-hover);
	}
	&:active {
		opacity: 0.7;
	}
	&.active {
		background-color: var(--jj-emoji-picker-head-item-bg-active);
	}
}
.emoji-picker-body {
	flex-grow: 1;
	min-height: 0;
	overflow: hidden;
}
.emoji-picker-slide {
	height: 100%;
	white-space: nowrap;
	transition: transform 0.1s;
}
.emoji-picker-body-item {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	height: 100%;
	white-space: normal;
	padding: 8px 0 8px 8px;
}
.emoji-picker-body-item {
	.emoji-picker-body-img,
	.emoji-picker-body-text {
		display: inline-block;
		vertical-align: top;
		padding: 6px;
		object-fit: contain;
		border-radius: 4px;
		white-space: nowrap;
		transition: background-color 0.3s;
		cursor: pointer;
		&:hover {
			background-color: var(--jj-emoji-picker-body-item-bg);
		}
	}
	.emoji-picker-body-img {
		width: 40px;
		height: 40px;
	}
	.emoji-picker-body-text {
		padding: 6px 10px;
	}
}
.emoji-picker-body-item.hot-word {
	.emoji-picker-body-img {
		width: 72px;
		height: 72px;
	}
}

@media screen and (max-width: 480px) {
	.emoji-btn {
		height: 20px;
	}
	.emoji-picker-content {
		width: 308px;
	}
}

@media screen and (max-width: 360px) {
	.emoji-btn {
		height: 20px;
	}
	.emoji-picker-head-item {
		& + & {
			margin-left: 8px;
		}
	}
	.emoji-picker-content {
		width: 268px;
	}
}
